{% extends "home/base.html" %}
{% block hotel %} class="active" {% endblock %}
{% block page_title %} 使用说明 {% endblock %}
{% block content %}

<style>
    /* 全局字体设置 */
    body {
        font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        color: #333;
        line-height: 1.6;
    }

    /* 工具容器样式 */
    .tool-container {
        margin-bottom: 50px;
        border: none;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .tool-container:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    }

    /* 工具头部样式 */
    .tool-header {
        background: linear-gradient(135deg, #3498db, #2c3e50);
        color: white;
        padding: 25px 30px;
    }

    .tool-header h2 {
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-weight: 600;
        font-size: 30px;
        margin: 0;
        letter-spacing: 0.5px;
    }

    /* 工具主体样式 */
    .tool-body {
        padding: 30px;
        background-color: #fff;
    }

    /* 各部分间距 */
    .tool-section {
        margin-bottom: 30px;
    }

    /* 文字样式 */
    .tool-section p.lead {
        font-size: 24px;
        color: #444;
        font-weight: 400;
        line-height: 1.8;
    }

    .tool-section p {
        font-size: 24px;
        color: #555;
        line-height: 1.8;
    }

    /* 图片样式 */
    .tool-image {
        max-width: 80%;
        height: auto;
        border-radius: 8px;
        margin: 20px auto;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        display: block;
        transition: transform 0.3s ease;
    }

    .tool-image:hover {
        transform: scale(1.02);
    }

    /* 视频样式 */
    .tool-video {
        width: 80%;
        height: 450px;
        border-radius: 8px;
        margin: 20px auto;
        display: block;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    /* 联系方式样式 */
    .contact-info {
        background: linear-gradient(to right, #f8f9fa, #e9ecef);
        padding: 20px;
        border-radius: 8px;
        margin-top: 30px;
        border-left: 4px solid #3498db;
    }

    .contact-info h5 {
        color: #2c3e50;
        font-weight: 600;
        margin-bottom: 10px;
        font-size: 18px;
    }

    .contact-info p {
        color: #555;
        margin: 0;
        font-size: 15px;
    }

    /* 下载按钮样式 */
    .download-btn {
        margin-top: 30px;
        padding: 12px 30px;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.5px;
        border-radius: 50px;
        background: linear-gradient(135deg, #2ecc71, #27ae60);
        border: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
    }

    .download-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(46, 204, 113, 0.4);
    }

    .download-btn i {
        margin-right: 8px;
    }

    /* 视频标题样式 */
    .tool-section h4 {
        color: #2c3e50;
        font-weight: 600;
        margin-bottom: 15px;
        font-size: 20px;
        text-align: center;
        position: relative;
        padding-bottom: 10px;
    }

    .tool-section h4:after {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background: #3498db;
        margin: 10px auto 0;
        border-radius: 3px;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .tool-header h2 {
            font-size: 24px;
        }

        .tool-image, .tool-video {
            width: 100%;
        }

        .tool-video {
            height: 300px;
        }
    }
</style>

<div class="container-fluid">
    <!-- 工具展示部分 -->
    {% if tools %}
        {% for tool in tools %}
        <div class="row mt-4">
            <div class="col-lg-12">
                <div class="tool-container">
                    <div class="tool-header">
                        <h2>{{ tool.title }}</h2>
                    </div>

                    <div class="tool-body">
                        <!-- 第一段文字介绍 -->
                        <div class="tool-section">
                            <p class="lead">{{ tool.description }}</p>
                        </div>

                        <!-- 工具图片 -->
                        <div class="tool-section text-center">
                            <img src="{{ tool.image_url }}" alt="{{ tool.title }}示意图" class="tool-image">
                        </div>

                        <!-- 第二段文字介绍 -->
                        <div class="tool-section">
                            <p>{{ tool.description2 }}</p>
                        </div>

                        <!-- 演示视频 -->
                        <div class="tool-section">
                            <h4>工具演示视频</h4>
                            <video controls class="tool-video">
                                <source src="{{ tool.video_url }}" type="video/mp4">
                                您的浏览器不支持视频播放
                            </video>
                        </div>

                        <!-- 联系方式 -->
                        <div class="contact-info">
                            <h5>联系方式</h5>
                            <p>{{ tool.contact }}</p>
                        </div>

                        <!-- 下载按钮 -->
{#                        <div class="text-center">#}
{#                            <a href="{{ url_for('home.download_file', filename=tool.filename) }}"#}
{#                               class="btn btn-success btn-lg download-btn">#}
{#                                <i class="fas fa-download"></i> 下载工具包#}
{#                            </a>#}
{#                        </div>#}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    {% endif %}
</div>
{% endblock %}